

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
/*    以下几个样式在 api 6 中体现 后期优化 如果不知道如何升级 api version6 看文章 https://blog.csdn.net/weixin_41104307/article/details/118278889*/
    overflow:scroll;
    overscroll-effect:spring;
    scrollbar-width:10px;
    scrollbar-color:red;
}
span{
    font-size: 20px;
    color:#888888;
}
.desc{
    padding:0 20px;
}
/*Flex样式*/
.flex-box {
    justify-content: space-around;
    align-items: center;
    width: 400px;
    height: 140px;
    background-color: #ffffff;
}
/*Flex-wrap样式*/
.flex-wrap-box {
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: #ffffff;
}
.flex-item {
    width: 120px;
    height: 120px;
    border-radius: 16px;
}
.color-primary {
    background-color: #007dff;
}
.color-warning {
    background-color: #ff7500;
}
.color-success {
    background-color: #41ba41;
}

/*grid样式*/
/* xxx.css */
.common {
    width: 400px;
    height: 400px;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    margin: 24px;
}
.grid-parent {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-columns-gap: 24px;
    grid-rows-gap: 24px;
    grid-template-rows: 45% 45%;
}
.btn-div {
    width: 100%;
    height: 80px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.grid-child {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid-left-top {
    grid-row-start: 0;
    grid-column-start: 0;
    grid-row-end: 0;
    grid-column-end: 0;
    background-color: #3f56ea;
}
.grid-left-bottom {
    grid-row-start: 1; /* 行起1*/
    grid-column-start: 0;/* 列起1*/
    grid-row-end: 1;/* 行止1*/
    grid-column-end: 0;/* 列止0*/
    background-color: red;
}
.grid-right-top {
    grid-row-start: 0;
    grid-column-start: 1;
    grid-row-end: 0;
    grid-column-end: 1;
    background-color: #00bfc9;
}
.grid-right-bottom {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 1;
    grid-column-end: 1;
    background-color: #47cc47;
}
.grid-right {
    grid-row-start: 0;
    grid-column-start: 1;
    grid-row-end: 1;
    grid-column-end: 1;
    background-color: #47cc47;
}
.grid-left {
    grid-row-start: 0;
    grid-column-start: 0;
    grid-row-end: 1;
    grid-column-end: 0;
    background-color: #47cc47;
}
.grid-top {
    grid-row-start: 0;
    grid-column-start: 0;
    grid-row-end: 0;
    grid-column-end: 1;
    background-color: #47cc47;
}
text{
    width: 100%;
    
    text-align: center;
}
.grid-bottom {
    grid-row-start: 1;
    grid-column-start: 0;
    grid-row-end: 1;
    grid-column-end: 1;
    background-color: #47cc47;
}
.grid-span{
    font-size: 25px;
    text-align: center;
    color:white;
}

